<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        {include file="public/static" /}
        <link rel="stylesheet" href="__components__/eleTree/eleTree.css" media="all">
        <style>
            .ele5{
                min-width: 94%;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                  <input type="hidden" id="id" name="id" value="{$info.ag_id}" />
                  <div class="layui-form-item">
                    <label for="status" class="layui-form-label">
                        <span class="x-red">*</span>上级角色
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" disabled value="{$onRole.ag_name}" lay-verify="onRole"autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label for="status" class="layui-form-label">
                        <span class="x-red">*</span>移动角色
                    </label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="hidden" id="pid" name="pid" value="{$info.ag_pid}" />
                            <input type="text" readonly name="role" placeholder="移动到角色下级" autocomplete="off" class="layui-input" value="" />
                            <div class="eleTree ele5" lay-filter="data5"></div>
                        </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>角色名
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="name" name="name" value="{$info.ag_name}" lay-verify="name"
                                autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="status" class="layui-form-label">
                          <span class="x-red">*</span>状态
                      </label>
                      <div class="layui-inline">
                          <select name="status" id="status">
                              <option value="1" {eq name="info.ag_status" value="1"} selected {/eq}>启用</option>
                              <option value="0" {eq name="info.ag_status" value="0"} selected {/eq}>禁用</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label"></label>
                      <button  class="layui-btn" lay-filter="edit" lay-submit="">提交</button>
                  </div>
              </form>
            </div>
        </div>
        <script>
            /**树形组件获取分类列表*/
            const list = common.getTreeMenuList("{:url('Role/getChildAuthGroup')}");
            const info = {name:"role", className:".ele5", nodeClick:"data5", inputId: "#pid"};
            common.treeMenu(list, info);
            /**验证与提交*/
            layui.use(['form', 'layer'], function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                //自定义验证规则
                form.verify({
                    //名称
                    name: function(value) {
                        if (value.length < 1) {
                            return '角色名不能为空';
                        }
                    }
                });
                //监听提交
                form.on('submit(edit)', function(data) {
                    var index = layer.load();
                    //发异步，把数据提交给php
                    $.ajax({
                        type:"post",
                        url:"{:url('Role/roleEdit')}",
                        data: data.field,
                        dataType: 'json',
                        success:function (data) {
                            if(data.status === 1){
                                layer.msg(data.info, {icon: 6,time:1500}, function() {
                                    /*关闭弹出层并刷新*/
                                    common.closeWindowReload();
                                });
                            }else{
                                layer.msg(data.info, {icon: 5,time:1500});
                            }
                            layer.close(index);
                        },
                        error:function (data) {
                            console.log(data);
                            layer.msg("不好意思，出现了一点问题", {icon: 5});
                        }
                    });
                    //必须加上return false，不然无法关闭iframe
                    return false;
                });
            });
        </script>
    </body>
</html>
